@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .finance-card {
    @apply bg-card-light rounded-lg shadow-lg border border-slate-700 w-full;
  }
  
  .finance-card-header {
    @apply py-3 px-4 bg-card-dark rounded-t-lg border-b border-slate-700 flex justify-between items-center;
  }
  
  .finance-table {
    @apply w-full border-collapse;
  }
  
  .finance-table th {
    @apply py-3 px-4 text-left bg-slate-700 text-white font-medium text-sm border-b border-slate-600;
  }
  
  .finance-table td {
    @apply py-3 px-4 border-b border-slate-600 text-sm text-white;
  }
  
  .finance-table tr {
    @apply bg-slate-800 bg-opacity-70;
  }
  
  .finance-table tr:nth-child(odd) {
    @apply bg-slate-800 bg-opacity-90;
  }
  
  .finance-table tr:hover {
    @apply bg-slate-700;
  }
  
  .text-rise {
    @apply text-finance-red-500 font-medium;
  }
  
  .text-fall {
    @apply text-finance-green-500 font-medium;
  }
  
  .nav-link {
    @apply px-4 py-2 text-slate-300 hover:text-white hover:bg-finance-blue-800 rounded;
  }
  
  .nav-link.active {
    @apply bg-finance-blue-700 text-white;
  }
  
  .btn-primary {
    @apply bg-finance-blue-600 hover:bg-finance-blue-700 text-white py-1 px-3 rounded text-sm;
  }
  
  .btn-secondary {
    @apply bg-slate-700 hover:bg-slate-600 text-white py-1 px-3 rounded text-sm;
  }
  
  .category-link {
    @apply block w-full text-left px-3 py-2 text-sm bg-slate-800 hover:bg-slate-700 hover:text-white rounded;
  }
}
::-webkit-scrollbar {
  background-color: #e4e4e4;
  border-radius: 30px;
  width: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border-radius: 30px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}
